<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" ></meta>
    <title>详细内容</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <script type="text/javascript" src="../assets/js/echarts.js"></script>
    <link href="../assets/css/bootstrap-datetimepicker.css" type="text/css">
    <script src="../assets/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/css/bootstrapDatepickr-1.0.0.css">
    <script src="../assets/js/bootstrapDatepickr-1.0.0.min.js"></script>
    <style>
        *{
            padding:0;
            list-style: none;
            text-decoration: none;
            font-weight:100;
            font-family:"微软雅黑";
            margin:0;
        }
        body{
            height:100%;
        }
        span{
            font:15px/33px 微软雅黑;
            display:inline-block;
        }
        b{
            font-weight:600 !important;
            color:black;
            line-height:60px !important;
        }
        body{
            margin-left:15px;
        }
        h4{
            font:22px/34px 微软雅黑;
            color:black;
        }
        h3{
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #2a3137;
        }
        .title{
            line-height:25px;
            margin-bottom: 5px;
            font-size:16px;
            color:#666666;
            margin-left:10px;
        }
        .title1{
            line-height:25px;
            font-size:16px;
            color:#666666;
            margin-left:10px;
            margin-top:5px;
        }
        .test p{
            width:100%;
            line-height:100px;
            font-size:15px;
            text-align:center;
        }
        thead tr th{
            text-align:center;
        }
        .table tr{
            height:42px;
        }
        /*thead hr{*/
        /*border-top: none !important;*/
        /*border-bottom: none !important;*/
        /*}*/
        #tablepart #example tr{
            border:none !important;
        }
        #tablepart #example tbody tr td{
            border:none !important;
            font:15px/42px 微软雅黑
        }
        #tablepart #example tbody tr{
            height:42px !important;
        }
        #tablepart #example thead tr th{
            color:#999999 !important;
            font:15px/42px 微软雅黑;
            border:none !important;
        }
        .dataTable{
            text-align:center;
        }
        .daterange i {
            position: absolute;
            bottom: 10px;
            right: 14px;
            top: auto;
            cursor: pointer;
        }
        .daterange {
            position: relative;
        }
        .container1{
            display:inline-block;
            width:100%;
            margin-top:12px;
        }
        .times{
            display:inline-block;
            width:150px;
        }
        .active a{
            background:#35acfd !important;
        }
        .pagination{
            float:right !important;
        }
        .btn{
            width:100px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
        }
        #tablepart #example tbody tr{
            border-bottom:1px solid #e6e6e6 !important;
        }
        thead tr{
            background:#e6e6e6;
        }
        .dataTables_empty{
            line-height:30px;
        }
    </style>
</head>
<body>
<div id="main">
    <div style="width:98%;overflow:hidden;background-color: #ffffff;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);">
        <div class="test" style="margin-left:19px;width:95%;">
            <div style="width:100%;overflow:hidden;">
                <h3>血压信息</h3>
            </div>
            <div v-if="!mainbar" id="mainBar" style="height:280px;width:100%;margin-top:14px;"></div>
            <p v-else="mainbar">暂无数据</p>
        </div>
    </div>
    <div style="width:98%;overflow:hidden;background-color: #ffffff;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);margin-top:20px;">
        <div class="test" style="margin-left:19px;width:95%;">
            <div style="width:100%;overflow:hidden;">
                <h3>血压报告</h3>
            </div>
            <div class="container1" class="row">
                <span style="display:inline-block;text-align:center;float:left;width:71px;"> 时间</span>
                <div style="display:inline-block;float:left;">
                    <div class="times">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1"><i class="fa fa-sort-desc"></i></span>
                            <input type="text" id="calendar" placeholder="起始时间" class="form-control" onchange="begin()">
                        </div>
                    </div>
                    <div class="times" style="margin-left:24px;">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1"><i class="fa fa-sort-desc"></i></span>
                            <input type="text" id="calendar2" placeholder="截止时间" class="form-control" onchange="end()">
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-info col-xs-1" onclick="refreshTable();" style="margin-left:20px;">搜索</button>
            </div>
            <div id="tablepart">
                <table id="example" class="display" cellspacing="10" width="95%">
                    <thead>
                    <tr style="bordr:none !important;cursor:auto !important">
                        <th style="width:8% !important">异常</th>
                        <th style="width:22.5% !important">检测时间</th>
                        <th style="width:22.5% !important">收缩压(mmHg)</th>
                        <th style="width:22.5% !important">舒张压(mmHg)</th>
                        <th style="width:22.5% !important">心率(bmp)</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el : "#main",
        data:{
            // 血压数据
            BpInfo:{
                data:[],
                firstjson:[],
                secondjson:[],
                thirdjson:[]
            },
            mainbar:false,
            show:false,
            bpjson:'',
            tablejson:[]
        },
        methods:{

        },
        mounted(){
            let that = this;
            // input范围选择器

            var query = window.location.search.substring(1);
            var vars = query.split("=");
            //获取ID
//                var url = vars[1].toString()
            // 获取血压趋势数据
            $.ajax({
                url:"${URL_PATIENT_BPINFO}",
                type:"post",
                dataType:"json",
                data:{
//                        idCard:url
                    idCard:511011198108120757
                },
                success:function(data){
                    if( data.data == null ){
                        that.mainbar = true;
                    }else{
                        // 获取对应数据 渲染页面
                        that.bpjson = data.data.bpList;
                        var bpList = data.data.bpList;
                        for( var a = 0 ; a < bpList.length ; a++ ){
                            if( bpList[a].testItemCode === '104001' ){
                                that.BpInfo.firstjson.push(bpList[a].testValue);
                                that.BpInfo.data.push(bpList[a].testTime.slice(5,10))
                            }
                            if( that.bpjson[a].testItemCode === '104002' ){
                                that.BpInfo.secondjson.push(bpList[a].testValue)
                            }
                            if( bpList[a].testItemCode === '104003'){
                                that.BpInfo.thirdjson.push(bpList[a].testValue)
                            }
                        }
                        for( var i = 0 ; i < that.BpInfo.firstjson.length ; i++ ){
                            that.tablejson.push({
                                szy : that.BpInfo.firstjson[i],
                                ssy : that.BpInfo.secondjson[i],
                                xl :  that.BpInfo.thirdjson[i],
                                time : that.BpInfo.data[i],
                                change : ""
                            })
                            //  检测是否异常
                            if( that.BpInfo.firstjson[i] >= 140 || that.BpInfo.secondjson[i] >= 90 || that.BpInfo.firstjson[i] >= 140 && that.BpInfo.secondjson[i] >= 90 ){
                                that.tablejson[i].change = "异常"
                            }
                        }
                        //基于准备好的dom,初始化echart图表
                        var myChart = echarts.init(document.getElementById('mainBar'));
                        var option = {
                            title:{
                                text:"血压(mmHg)",
                                textStyle:{
                                    //文字颜色
                                    color:'#b0b0b0',
                                    //字体风格,'normal','italic','oblique'
                                    fontStyle:'normal',
                                    //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                                    fontWeight:'lignter',
                                    //字体大小
                                    fontSize:18
                                }
                            },
                            tooltip : {
                                trigger: 'axis',
                                axisPointer : {
                                    type : 'shadow'
                                },
                                triggerOn:"mousemove",
                                showContent:true,
                                alwaysShowContent:true,
                                showDelay:0,
                                hideDelay:100,
                                transitionDuration:0.4,
                                textStyle:{
                                    align:'center'
                                },
                                formatter:function(params)
                                {
                                    var str="";
                                    var n = [];
                                    var m=[];
                                    for(var i=0;i<params.length;i++){
                                        if(params[i].data==""||undefined==params[i].data){

                                        }else{
                                            n.push(params[i].marker+params[i].seriesName+":"+params[i].data+"<br>");
                                        }
                                    };

                                    for(var i = 0; i < n.length; i++)
                                    {
                                        if (m.indexOf(n[i]) == -1) m.push(n[i]);
                                    }
                                    for(var i = 0; i < m.length; i++){
                                        str+=m[i];
                                    }
                                    return str;
                                }
                            },
                            calculable : true,
                            xAxis : [
                                {
                                    type : 'category',
                                    boundaryGap : false,
                                    data : that.BpInfo.data,
                                    axisLabel:{
                                        interval:0,
                                        textStyle: {
                                            color: 'black',
                                            fontSize:'16'
                                        }
                                    },
                                    axisLine:{
                                        lineStyle :{
                                            color: 'white'
                                        }
                                    }
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    axisLabel: {
                                        show: true,
                                        textStyle: {
                                            color: '#8c8c8c',
                                            fontSize:18
                                        }
                                    },
                                    axisLine:{
                                        lineStyle:{
                                            color:'white'
                                        }
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    splitLine:{
                                        show:false
                                    },
                                    splitNumber :2
                                }
                            ],
                            grid: {
                                left: '0',
                                right: '7%',
                                top:'15%',
                                bottom: '15%',
                                containLabel: true,
                                y2:50
                            },
                            series: [
                                {
                                    name: '舒张压',
                                    type: 'line',
                                    label: {
                                        normal: {
                                            position: 'insideRight'
                                        }
                                    },
                                    data: that.BpInfo.firstjson,
                                    itemStyle : {
                                        normal : {
                                            lineStyle:{
                                                color:'#3a85ff'
                                            }
                                        }
                                    },
                                    symbol:'circle',
                                    symbolSize: 16,
                                    itemStyle : {
                                        normal : {
                                            color:'#3a85ff',
                                            lineStyle:{
                                                color:'#3a85ff'
                                            }
                                        }
                                    }
                                },
                                {
                                    name: '收缩压',
                                    type: 'line',
                                    label: {
                                        normal: {
                                            position: 'insideRight'
                                        }
                                    },
                                    data: that.BpInfo.secondjson,
                                    itemStyle : {
                                        normal : {
                                            lineStyle:{
                                                color:'#3a85ff'
                                            }
                                        }
                                    },
                                    symbol:'circle',
                                    symbolSize: 16,
                                    itemStyle : {
                                        normal : {
                                            color:'#00d2cb',
                                            lineStyle:{
                                                color:'#00d2cb'
                                            }
                                        }
                                    }
                                }
                            ]
                        };
                        //为echarts对象加载数据
                        myChart.setOption(option);
                        window.addEventListener("resize", function () {
                            myChart.resize();
                        })
                    }
                }
            })
        }
    })
    // boot时间选择器插件
    $(document).ready(function() {
        $("#calendar").bootstrapDatepickr();
        $("#calendar2").bootstrapDatepickr();
    });
    var table;
    var begintime;
    var endtime;
    let that = this;
    // input范围选择器
    var query = window.location.search.substring(1);
    var vars = query.split("=");
    //获取ID
    //        var url = vars[1].toString()
    <%--var idCard='${URL_PATIENT_BPINFO}?idCard='+url--%>
    var idCard='${URL_PATIENT_BPINFO}?idCard=511011198108120757';
    function begin(){
        var arr = $('#calendar').val().splite('/');
        begintime = arr[2]+"-"+arr[1]+"-"+arr[0]
    }
    function end(){
        var arr = $('#calendar2').val().splite('/');
        endtime = arr[2]+"-"+arr[1]+"-"+arr[0]
    }
    //        $.ajax({
    //            url:idCard,
    //            dataType:'json',
    //            type:'post',
    //            success:function(data){
    //                console.log(data)
    //            }
    //        })
    function initTable() {
        table = $('#example').DataTable({
            "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-10'><'col-xs-6'f>r>" +
            "t" +
            "<'row'<'col-xs-6'i><'col-xs-6'p>>",
            "bFilter": false,//去掉搜索框
            "bAutoWidth": true, //自适应宽度
            "info": false,
            "bSort": false,
            "ordering": false,
            "serverSide": true,
            "PaginationType": "full_numbers",
            "ordering": false,//是否允许Datatables开启排序
            "bProcessing": true,
            "bServerSide": true,
            "searching": false, //去掉搜索框方法一
            "bFilter": false,
            'lengthChange': false,
            "oPaginate": false,
            "lengthMenu": [10],
            "sAjaxSource": idCard,
            "sAjaxDataProp": "data.bpList",//查询后，返回的集合
            'columnDefs': [
                {
                    "Targets": 0,
                    "render": function (data, type, row) {
                        // 打印出来的 data 数据为整个json数据
                        console.log(data)
                    }
                }
            ],
            "fnServerData": function (sSource, aoData, fnCallback) {  //查询条件
                aoData.push(
                    {
                        "name": "beginTime",
                        "value": begintime
                    },
                    {
                        "name": "endTime",
                        "value": endtime
                    }
                )

                $.ajax( {
                    "dataType": 'json',
                    "url": sSource,
                    "type":'post',
                    "data": aoData,
                    "success" : function(resp) {
                        var map = {},
                            dest = [];
                        var arr = resp.data.bpList;
                        console.log( resp.data.bpList);
                        for(var i = 0; i < arr.length; i++){
                            var ai = arr[i];
                            if(!map[ai.testTime]){
                                dest.push({
                                    consultHigh: ai.consultHigh,
                                    consultLow: ai.consultLow,
                                    testTime:ai.testTime,
                                    testValue:ai.testValue,
                                    data: [ai]
                                });
                                map[ai.testTime] = ai;
                            }else{
                                for(var j = 0; j < dest.length; j++){
                                    var dj = dest[j];
                                    if(dj.testTime == ai.testTime){
                                        dj.data.push(ai);
                                        break;
                                    }
                                }
                            }
                        }
                        console.log(dest);
                        resp.data.bpList = dest;
                        resp.data.total = dest.length;
                        fnCallback(resp);
                    }
                } );
            },
            //用于处理服务器端返回的数据。 dataSrc是DataTable特有的

            "fnDrawCallback": function (oSettings) {
//                    var aoData = [];
//                    var testtime = [];
//                    var szy = [];
//                    var ssy = [];
//                    var xl = [];
//                    for( var a = 0 ; a < oSettings.aoData.length; a++ ){
//                        //  舒张压
//                        if( oSettings.aoData[a]._aData.testItemCode === '104001' ){
//                            testtime.push({time:oSettings.aoData[a]._aData.testTime.slice(0,9)})
//                            szy.push({szy:oSettings.aoData[a]._aData.testValue})
//                        }
//                        // 收缩压
//                        if( oSettings.aoData[a]._aData.testItemCode === '104002' ){
//                            ssy.push({ssy:oSettings.aoData[a]._aData.testValue})
//                        }
//                        // 血压
//                        if( oSettings.aoData[a]._aData.testItemCode === '104003' ){
//                            xl.push({xl:oSettings.aoData[a]._aData.testValue})
//                        }
//                    }
//                    for( var  i = 0; i < testtime.length ; i++ ){
//                        aoData.push({
//                            szy : szy[i],
//                            ssy : ssy[i],
//                            xl :  xl[i],
//                            time : testtime[i],
//                            change : ""
//                        })
//                        if( aoData[i].szy >= 140 && aoData[i].ssy >= 90 ){
//                            aoData[i].change = "异常"
//                        }
//                    }
//                    console.log(aoData)
            },
            "aoColumns" : [
                {
                    "targets": 0,
                    "data": null,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if( oData.testItemCode === '104001' ){
                            if( oData.testValue > 90 ){
                                $(nTd).text("异常")
                            }
                        }else if( oData.testItemCode === '104002' ){
                            if( oData.testValue > 140 ){
                                $(nTd).text("异常")
                            }
                        }else{
                            $(nTd).text("")
                        }
                    }
                },
                {
                    "mDataProp" : "consultHigh"
                },
                {
                    "mDataProp" : "consultLow"
                },
                {
                    "mDataProp" : "testTime"
                },
                {
                    "mDataProp" : "testValue"
                }
            ],
//                "aoColumns" : [ {
//                    "targets": 0,
//                    "data": null,
//                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
//                        if( oData.testItemCode === '104001' ){
//                            if( oData.testValue > 90 ){
//                                $(nTd).text("异常")
//                            }
//                        }else if( oData.testItemCode === '104002' ){
//                            if( oData.testValue > 140 ){
//                                $(nTd).text("异常")
//                            }
//                        }else{
//                            $(nTd).text("")
//                        }
//                    }
//                },{
//                    // 时间
//                    "targets": 1,
//                    "data": null,
//                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
//                        if( oData.testItemCode === '104001' ){
//                            $(nTd).text(oData.testTime.slice(0,10))
//                        }else if( oData.testItemCode === '104002' ){
//                            return undefined
//                        }else{
//                            return undefined
//                        }
//                    }
//                },{
//                    "targets": 2,
//                    "data": null,
//                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
//                        if( oData.testItemCode === '104001' ){
//
//                            $(nTd).text(sData.testValue)
//                        }
//                    }
//                },{
//                    "targets": 3,
//                    "data": null,
//                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
//                        var arr = []
//                        if( oData.testItemCode === '104002' ){
//                            arr.push(sData.testValue)
//                            $(nTd).text(arr[0])
//                        }
//                    }
//                },{
//                    "targets": 4,
//                    "data": null,
//                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
//                        if( oData.testItemCode === '104003' ){
//
//                            $(nTd).text(sData.testValue)
//                        }
//                    }
//                }],
            "oLanguage": {//插件的汉化
                "sZeroRecords": "抱歉， 没有找到",
//           "sInfo": "当前显示 _START_ 到 _END_条 ,共 _TOTAL_ 条记录",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "◀",
                    "sLast": "尾页",
                    "sNext": "▶"
                },
                "sZeroRecords": "没有检索到数据",
                "sProcessing": "<img src='' />",
                "sSearch": "搜索"
            }
        });
    }
    initTable()
</script>
</body>
</html>
